import { trendAlarm } from "@/api/modules/iot/alarm";
import executed from "@/assets/images/executed.png";
import nonExecute from "@/assets/images/nonExecute.png";
import { dayjs } from "element-plus";
import TrendNumber from "./trendNumber";
import RankingDevice from "../ranking/rankingDevice";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		onMounted(() => {
			init();
		});
		const init = async () => {
			let { result } = await trendAlarm({
				type: "",
				timeStamp: `${dayjs().add(-1, "d").format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`
			});
			let data: any = result || {};
			state.tadayAlarm = data[dayjs().format("YYYY-MM-DD")];
			state.yesterdayAlarm = data[dayjs().add(-1, "d").format("YYYY-MM-DD")];
		};
		const state = reactive({
			tadayAlarm: { executed: 0, nonExecute: 0 },
			yesterdayAlarm: { executed: 0, nonExecute: 0 }
		});
		return () => {
			return (
				<div class="">
					<div class="flex">
						<div class="bg-white p-6 w-full">
							<div class="page-title flex">
								<div class="title-left-line"></div>
								{proxy?.$t("alarmmonitor.card_title.today_alarm")}
							</div>
							<div class="card-bg grid grid-cols-2 mt-4">
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={nonExecute} class="left-icon mr-4"></el-image>
										<div class="text-sm">{proxy?.$t("alarmmonitor.today.no_execute")}</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.tadayAlarm.nonExecute}</div>
								</div>
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={executed} class="left-icon mr-4"></el-image>
										<div class="text-sm">{proxy?.$t("alarmmonitor.today.executed")}</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.tadayAlarm.executed}</div>
								</div>
							</div>
						</div>
						<div class="bg-white p-6 w-full">
							<div class="page-title flex">
								<div class="title-left-line"></div>
								{proxy?.$t("alarmmonitor.card_title.yesterday_alarm")}
							</div>
							<div class="card-bg grid grid-cols-2 mt-4">
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={nonExecute} class="left-icon mr-4"></el-image>
										<div class="text-sm">{proxy?.$t("alarmmonitor.yesterday.no_execute")}</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.yesterdayAlarm.nonExecute}</div>
								</div>
								<div class=" h-20 flex items-center p-4">
									<div class="flex flex-1">
										<el-image src={executed} class="left-icon mr-4"></el-image>
										<div class="text-sm">{proxy?.$t("alarmmonitor.yesterday.executed")}</div>
									</div>
									<div class="text-xl font-bold flex-1 text-center">{state.yesterdayAlarm.executed}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="grid grid-cols-2 gap-4 mt-4" style="height: calc(100vh - 342px);">
						<TrendNumber class="w-full h-full" />
						<RankingDevice class="h-full" />
					</div>
				</div>
			);
		};
	}
});
